<template>
    <div class="conteiner">
        <div class="input-group">
            <input type="text" v-auto-focus data-toggle="dropdown" class="form-control" placeholder="请输入">
            <div class="input-group-append">
                <a><i class="iconfont icon-lunkuodasan-"></i>热搜榜</a>
                <button class="btn btn-primary"><i class="iconfont icon-fangdajing"></i>搜全网</button>
            </div>
            <!--下拉-->
            <div class="dropdown-menu">
                <div class="conteiner">
                    <div class="history-search-list">
                        <h5>搜索历史<i class="iconfont icon-lajitong"></i></h5>
                        <ul class="list-inline">
                            <li class="list-inline">列表之一</li>
                            <li class="list-inline">列表之二</li>
                            <li class="list-inline">列表之三</li>
                        </ul>
                    </div>
                    <div class="hot-search-list">
                        <h5>热门搜索</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "search"
    }
</script>

<style scoped lang="scss">
.conteiner{
    width: 100%;
    .input-group{
        height: 40px;
        background-color: rgba(0,0,0,.3);
        border-radius: 20px;
        input{
            border: none;
            color: white;
            z-index: 3;
            &::placeholder{
                color: #c4c4c4;
            }
            border-radius: 20px 0 0 20px;
            background-color: rgba(0,0,0,0.05);
        }
        .input-group-append{
            width: 95px;
            position: relative;
            button{
                border-radius:0 20px 20px 0;
                width: 100%;
                i{margin-right: 3px}
            }
            a{
                position: absolute;
                left: -65%;
                top: 25%;
                color: blue;
                z-index: 5;
                &:hover{
                    color: red;
                    cursor:pointer;
                }
            }
        }
        .dropdown-menu{
            width: 100%;
            border-radius: 0;
            border: none;
            background-color: rgba(0,0,0,0);
            padding:0 95px 0 10px;
            .conteiner{
                background-color: #3399e0;
                padding: 10px;
                background-color: rgb(45,45,48);
                h5{
                    color: hsla(0,0%,100%,.6);
                    font-size: 14px;
                    font-weight: 400;
                    padding: 8px 16px;
                    i{
                        float: right;
                        font-size: 14px;
                        &:hover{
                            color: #3399e0;
                            cursor:pointer;
                        }
                    }
                }
            }
        }
    }
}
</style>